<template>
    <div class="page">
        <div class="gva-card-box">
            <dashboardTop />
        </div>
        <div class="gva-card-box">
            <div class="gva-card quick-entrance">
                <div class="gva-card-title">快捷入口</div>
                <el-row :gutter="10">
                    <el-col
                        v-for="(card, key) in toolCards"
                        :key="key"
                        :span="2"
                        :xs="8"
                        class="quick-entrance-items"
                        @click="toTarget(card.url)"
                    >
                        <div class="quick-entrance-item">
                            <div
                                class="quick-entrance-item-icon"
                                :style="{ backgroundColor: card.bg }"
                            >
                                <el-icon>
                                    <component
                                        :is="card.icon"
                                        :style="{ color: card.color }"
                                    />
                                </el-icon>
                            </div>
                            <p>{{ card.label }}</p>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="gva-card-box gva-card-box-level3">
            <el-row :gutter="20">
                <!-- 数据简报 -->
                <el-col :xs="24" :sm="12">
                    <div class="gva-card">
                        <div class="gva-card-title">
                            数据简报
                            <div class="gva-card-title-btn">
                                <el-select
                                    v-model="formData.type"
                                    :placeholder="`请选择`"
                                    style="width: 120px"
                                    :clearable="true"
                                >
                                    <el-option
                                        label="公司简报"
                                        value="公司简报"
                                    />
                                    <el-option
                                        label="部门简报"
                                        value="部门简报"
                                    />
                                    <el-option
                                        label="我的简报"
                                        value="我的简报"
                                    />
                                </el-select>
                                <el-select
                                    v-model="formData.time"
                                    :placeholder="`请选择`"
                                    style="width: 120px; margin-left: 20px"
                                    :clearable="true"
                                >
                                    <el-option label="今天" value="今天" />
                                    <el-option label="昨天" value="昨天" />
                                    <el-option label="本周" value="本周" />
                                    <el-option label="上周" value="上周" />
                                    <el-option label="本月" value="本月" />
                                    <el-option label="上月" value="上月" />
                                    <el-option label="本季度" value="本季度" />
                                    <el-option label="上季度" value="上季度" />
                                    <el-option label="今年" value="今年" />
                                    <el-option label="去年" value="去年" />
                                </el-select>
                            </div>
                        </div>
                        <div class="p-4 brief-report">
                            <div
                                v-for="(item, index) in briefReportData"
                                :key="index"
                                class="brief-report-item"
                            >
                                <div class="brief-report-item-title">
                                    {{ item.name }}
                                </div>
                                <div class="brief-report-item-num">
                                    {{ item.value }}
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <!-- 系统公告 -->
                <el-col :xs="24" :sm="12">
                    <div class="gva-card system-note-box">
                        <div class="gva-card-title">
                            <span>系统公告</span>
                            <span class="gva-card-title-more">查看更多></span>
                        </div>
                        <div class="p-4 system-note">
                            <div
                                v-for="(item, index) in systemNoteData"
                                :key="index"
                                class="system-note-item"
                            >
                                <span class="system-note-item-title"
                                    >[{{ item.type }}]{{ item.title }}</span
                                >
                                <span class="system-note-item-time"
                                    ><el-icon><Clock /></el-icon
                                    >{{ item.time }}</span
                                >
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup>
import EchartsLine from "@/view/dashboard/dashboardCharts/echartsLine.vue";
import DashboardTable from "@/view/dashboard/dashboardTable/dashboardTable.vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useWeatherInfo } from "@/view/dashboard/weather.js";
import SelectImage from "@/components/selectImage/selectImage.vue";
import dashboardTop from "./components/dashboardTop.vue";

defineOptions({
    name: "Dashboard",
});

const weatherInfo = useWeatherInfo();

// 快捷入口
const toolCards = ref([
    {
        label: "用户管理",
        icon: "monitor",
        name: "user",
        url: "/layout/admin/user",
        color: "#ff9c6e",
        bg: "rgba(255, 156, 110,.3)",
    },
    {
        label: "款式资讯",
        icon: "chat-dot-square",
        name: "authority",
        url: "/layout/productStyles",
        color: "#69c0ff",
        bg: "rgba(105, 192, 255,.3)",
    },
    {
        label: "产品规格",
        icon: "document",
        name: "menu",
        url: "/layout/productSpec",
        color: "#b37feb",
        bg: "rgba(179, 127, 235,.3)",
    },
    {
        label: "首办单",
        icon: "add-location",
        name: "autoCode",
        url: "/layout/firstorderprocessing/list",
        color: "#ffd666",
        bg: "rgba(255, 214, 102,.3)",
    },
    {
        label: "大办单",
        icon: "alarm-clock",
        name: "autoCode",
        url: "/layout/largeScaleOrder",
        color: "#ffd666",
        bg: "rgba(185, 224, 102,.3)",
    },
    {
        label: "起模通知单",
        icon: "notification",
        name: "autoCode",
        url: "/layout/moldStartNotice",
        color: "#ffd666",
        bg: "rgba(255, 133, 192,.3)",
    },
    {
        label: "Master BOM",
        icon: "collection-tag",
        name: "autoCode",
        url: "/layout/masterBOM",
        color: "#ffd666",
        bg: "rgba(92, 219, 211,.3)",
    },
    // {
    //     label: "角色管理",
    //     icon: "setting",
    //     name: "authority",
    //     color: "#69c0ff",
    //     bg: "rgba(105, 192, 255,.3)",
    // },
    // {
    //     label: "菜单管理",
    //     icon: "menu",
    //     name: "menu",
    //     color: "#b37feb",
    //     bg: "rgba(179, 127, 235,.3)",
    // },
    // {
    //     label: "代码生成器",
    //     icon: "cpu",
    //     name: "autoCode",
    //     color: "#ffd666",
    //     bg: "rgba(255, 214, 102,.3)",
    // },
    // {
    //     label: "表单生成器",
    //     icon: "document-checked",
    //     name: "formCreate",
    //     color: "#ff85c0",
    //     bg: "rgba(255, 133, 192,.3)",
    // },
    // {
    //     label: "关于我们",
    //     icon: "user",
    //     name: "about",
    //     color: "#5cdbd3",
    //     bg: "rgba(92, 219, 211,.3)",
    // },
]);

const router = useRouter();

// 简报数据
const briefReportData = ref([
    { name: "新增款式", value: 2 },
    { name: "新增产品", value: 2 },
    { name: "新增首板", value: 200 },
    { name: "新增大板", value: 200 },
    { name: "新增客户", value: 200 },
    { name: "新增起模通知单", value: 200 },
    { name: "新增MasterBOM", value: 200 },
]);
const formData = ref({
    type: "公司简报",
    time: "今年",
});
// 系统公告
const systemNoteData = ref([
    { title: "事务通知标题", type: "通知", time: "2024-04-12 09:00" },
    { title: "事务通知标题", type: "通知", time: "2024-04-12 09:00" },
    { title: "事务通知标题", type: "通知", time: "2024-04-12 09:00" },
    { title: "事务通知标题", type: "通知", time: "2024-04-12 09:00" },
    { title: "事务通知标题", type: "通知", time: "2024-04-12 09:00" },
    { title: "事务通知标题", type: "通知", time: "2024-04-12 09:00" },
    { title: "事务通知标题", type: "通知", time: "2024-04-12 09:00" },
]);

const toTarget = (url) => {
    router.push({
        path: url,
    });
};
</script>

<style lang="scss" scoped>
.page {
    @apply p-0;
    .gva-card-box {
        @apply p-4;
        & + .gva-card-box {
            @apply pt-0;
        }
    }
    .gva-card {
        // @apply box-border bg-white rounded h-auto px-6 py-8 overflow-hidden shadow-sm;
        @apply box-border bg-white rounded h-auto px-6 py-8 shadow-sm;
        .gva-card-title {
            @apply pb-5 border-t-0 border-l-0 border-r-0 border-b border-solid border-gray-100;
            position: relative;
            .gva-card-title-more {
                position: absolute;
                top: -13px;
                right: 0;
                display: block;
                border: 1px solid #ccc;
                border-radius: 4px;
                padding: 8px;
                cursor: pointer;
            }
            .gva-card-title-btn {
                position: absolute;
                top: -13px;
                right: 0;
            }
        }
    }
    ::v-deep(.el-card__header) {
        @apply p-0  border-gray-200;
    }
    .card-header {
        @apply pb-5 border-b border-solid border-gray-200 border-t-0 border-l-0 border-r-0;
    }
    .quick-entrance-items {
        @apply flex items-center justify-center text-center text-gray-800;
        .quick-entrance-item {
            @apply px-8 py-6 flex items-center flex-col transition-all duration-100 ease-in-out rounded-lg cursor-pointer;
            &:hover {
                @apply shadow-lg;
            }
            &-icon {
                @apply flex items-center h-16 w-16 rounded-lg justify-center mx-0 my-auto text-2xl;
            }
            p {
                @apply mt-2.5;
                white-space: nowrap;
            }
        }
    }
}
.dashboard-icon {
    @apply flex items-center text-xl mr-2 text-blue-400;
}
// 简报
.brief-report {
    display: flex;
    flex-wrap: wrap;
    .brief-report-item {
        flex: 0 0 25%;
        padding: 40px 0px;
        text-align: center;
        &:hover {
            // background: #f2f6fc;
            // box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        }
        &-title {
            color: #999;
        }
        &-num {
            font-size: 18px;
            font-weight: 600;
            padding-top: 20px;
        }
    }
}
// 系统消息
.system-note-box {
    height: 100% !important;
}
.system-note {
    overflow: scroll;
    .system-note-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px dotted #ccc8;
        cursor: pointer;
        &:hover {
            background: #f2f6fc;
        }
        .system-note-item-title {
            font-weight: 600;
        }
        .system-note-item-time {
            display: flex;
            align-items: center;
        }
    }
}
</style>
